<template>
  <div>

    <baidu-map class="bm-view" :center="center" :zoom="zoom" scroll-wheel-zoom
               map-type="BMAP_NORMAL_MAP" @ready="handler" :map-style="mapStyle">
      <bm-map-type :map-types="['BMAP_NORMAL_MAP','BMAP_SATELLITE_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"
                   :offset="20"></bm-map-type>
      <bm-polygon v-for="(greenhouse,index) of greenhouses" :path="greenhouse.polygonPath" stroke-color="blue"
                  :stroke-opacity="0.5" :stroke-weight="2"  @lineupdate="updatePolygonPath" @click="infoWindowOpen(greenhouse)"
                  :fill-color=color[index%5] :fillOpacity="0.54"/>

          <bm-info-window :show="greenhouse.infoWindowShow" @close="infoWindowClose(greenhouse)" @open="infoWindowOpen(greenhouse)"
                          :title=greenhouse.name auto-pan :position="greenhouse.position">
            <el-row>
              <el-image :src=greenhouse.img fit="cover" style="width: 100px; height: 100px"></el-image>
              <el-button type="text" icon="el-icon-more" round style="float: right"
                         @click="$router.push('/greenhouseInfo')">详情
              </el-button>
            </el-row>
            <el-row style="margin-top: 20px">
                  <el-icon style="margin-right: 10px" class="el-icon-cherry"></el-icon>
                  <span >{{ greenhouse.crops }}</span>
            </el-row>
            <el-row style="margin-top: 20px">
                  <el-icon style="margin-right: 10px;color: #7cd267" class="el-icon-success"></el-icon>
                  <span style="margin-right: 20px;color: #7cd267 ;font-size: small">{{ greenhouse.running}}</span>
                  <el-icon style="margin-right: 10px;color: #ee5d5d; " class="el-icon-error"></el-icon>
                  <span style="color: #ee5d5d ;font-size: small">{{ greenhouse.error }}</span>
            </el-row>
            <el-row style="margin-top: 20px;font-size: small">
              <el-icon style="margin-right: 10px" class="el-icon-location"></el-icon>
              <span>{{ greenhouse.adr }}</span>
            </el-row>
          </bm-info-window>
      <bml-marker-clusterer averageCenter>
        <bm-marker v-for="(marker,index) of markers" :key="index" :position="{lng: marker.lng, lat: marker.lat}"
                   @click="infoOpen(index,marker)" :icon=marker.icon animation="BMAP_ANIMATION_BOUNCE" >
          <bm-info-window :show="marker.show" @close="infoClose(marker)" @open="infoOpen(index,marker)"
                          :title=marker.name auto-pan>
            <div>
              <el-row>
                <!--                <el-avatar :src=marker.img fit="cover" shape="square"></el-avatar>-->
                <el-image :src=marker.img fit="cover" style="width: 100px; height: 100px"></el-image>
                <el-button type="text" icon="el-icon-more" round style="float: right"
                           @click="$router.replace('/deviceInfo')">详情
                </el-button>
              </el-row>
              <el-row>
                <el-tag v-if="marker.state === 1" type="success">正常工作</el-tag>
                <el-tag v-else type="warning">设备异常</el-tag>
              </el-row>
              <span style="color: #666666 ;font-size: small">{{ marker.position }}</span>
              <el-row v-for="(param,index) of marker.params" :key="index" style="margin: 20px auto">
                <el-input :value=param.p_desc autosize readonly>
                  <template slot="prepend">{{ param.p_c_name }}</template>
                  <template slot="append">{{ param.p_c_unit }}</template>
                </el-input>
              </el-row>
            </div>
          </bm-info-window>
        </bm-marker>
      </bml-marker-clusterer>
    </baidu-map>
  </div>
</template>

<script>
import {BmlMarkerClusterer} from 'vue-baidu-map';
import DistanceTool from 'bmaplib.distancetool'

export default {
  name: "presentation",
  components: {
    BmlMarkerClusterer
  },
  data() {
    return {
      center: {lng: 0, lat: 0},
      zoom: 12,
      color:["#BBFFFF","#FFEFD5","#C1FFC1","#FFDAB9","#ADFF2F"],
      greenhouse:{},
      value: 60,
      show: false,
      state: 1,
      infoShow: [],
      infoContent: [""],
      markerPoint: {lng: 122.088581, lat: 37.539801},
      infoWindow: {
        contents: ''
      },
      greenhouses: [
        {
          icon:"https://gitee.com/seng-acheng63201/images-md/raw/master/20210709214039.png",
          position:{ lng:122.088866,lat: 37.537562},
          polygonPath: [
            {lng: 122.089766, lat: 37.542114},
            {lng: 122.085059, lat: 37.535275},
            {lng: 122.089622, lat: 37.533329},
            {lng: 122.094042, lat: 37.539452},
          ],
          name:"一号农田",
          img:"https://gitee.com/seng-acheng63201/images-md/raw/master/20210709211245.jpg",
          adr:"哈尔滨工业大学威海研究院",
          crops:'小麦',
          running:3,
          error:1,
          infoWindowShow:false,
        },
        {
          icon: "https://gitee.com/seng-acheng63201/images-md/raw/master/20210709214037.png",
          position: { lng:122.116399,lat: 37.535371},
          polygonPath:  [
            {lat: 37.541633, lng: 122.114812},
            {lat: 37.538771, lng: 122.109637},
            {lat: 37.532934, lng: 122.117399},
            {lat: 37.537054, lng: 122.122142},
          ],
          name:"二号农田",
          img:"https://gitee.com/seng-acheng63201/images-md/raw/master/20210709211244.jpg",
          crops:'樱桃',
          running:3,
          error:0,
          adr:"幸福的和个别地方",
          infoWindowShow:false,
        },
        {
          icon: "https://gitee.com/seng-acheng63201/images-md/raw/master/20210709214035.png",
          position: { lng:122.135341,lat:  37.546857},
          polygonPath:  [
            {lng: 122.138096, lat: 37.544093},
            {lng: 122.131341, lat: 37.549357},
            {lng: 122.139389, lat: 37.553019},
            {lng: 122.145857, lat: 37.547469},
          ],
          name:"三号农田",
          img:'https://gitee.com/seng-acheng63201/images-md/raw/master/20210709211244.jpg',
          adr:"散热让他你不然万饿啊男孩和",
          crops:'苹果',
          running:3,
          error:0,
          infoWindowShow:false,
        },
      ],
      markers: [],
      mapStyle: {
        styleJson: [
          {
            "featureType": "land",
            "elementType": "geometry",
            "stylers": {
              "color": "#212121"
            }
          },
          {
            "featureType": "building",
            "elementType": "geometry",
            "stylers": {
              "color": "#2b2b2b"
            }
          },
          {
            "featureType": "highway",
            "elementType": "all",
            "stylers": {
              "lightness": -42,
              "saturation": -91
            }
          },
          {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
              "lightness": -77,
              "saturation": -94
            }
          },
          {
            "featureType": "green",
            "elementType": "geometry",
            "stylers": {
              "color": "#1b1b1b"
            }
          },
          {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": {
              "color": "#181818"
            }
          },
          {
            "featureType": "subway",
            "elementType": "geometry.stroke",
            "stylers": {
              "color": "#181818"
            }
          },
          {
            "featureType": "railway",
            "elementType": "geometry",
            "stylers": {
              "lightness": -52
            }
          },
          {
            "featureType": "all",
            "elementType": "labels.text.stroke",
            "stylers": {
              "color": "#313131"
            }
          },
          {
            "featureType": "all",
            "elementType": "labels.text.fill",
            "stylers": {
              "color": "#8b8787"
            }
          },
          {
            "featureType": "manmade",
            "elementType": "geometry",
            "stylers": {
              "color": "#1b1b1b"
            }
          },
          {
            "featureType": "local",
            "elementType": "geometry",
            "stylers": {
              "lightness": -75,
              "saturation": -91
            }
          },
          {
            "featureType": "subway",
            "elementType": "geometry",
            "stylers": {
              "lightness": -65
            }
          },
          {
            "featureType": "railway",
            "elementType": "all",
            "stylers": {
              "lightness": -40
            }
          },
          {
            "featureType": "boundary",
            "elementType": "geometry",
            "stylers": {
              "color": "#8b8787",
              "weight": "1",
              "lightness": -29
            }
          }
        ]
      }
    }
  },
  created() {
    this.createMarker(3,122.085059,37.533329)
    this.createMarker(3,122.109637,37.532934)
    this.createMarker(3,122.131341,37.544093)
  },
  unmount() {
    distanceTool && distanceTool.close()
  },
  methods: {
    handler({map}) {
      this.center.lng = 122.088581
      this.center.lat = 37.539801
      this.zoom = 14
      this.setDistanceToolInstance(map);
    },
    updatePolylinePath(e) {
      this.polylinePath = e.target.getPath()
    },
    infoOpen(index, marker) {
      // marker.position = marker.lat + "  " + marker.lng
      marker.show = true
    },
    infoClose(marker) {
      marker.show = false
    },
    infoWindowClose(greenhouse) {
      greenhouse.infoWindowShow = false
    },
    infoWindowOpen(greenhouse) {
      this.greenhouse = greenhouse
      this.greenhouse.infoWindowShow = true

    },
    setDistanceToolInstance({map}) {
      this.distanceTool = new DistanceTool(map, {lineStroke: 2})
    },

    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath()
    },
    addPolygonPoint() {
      this.polygonPath.push({lng: 116.404, lat: 39.915})
    },

    createMarker(n,lng,lat){
      for (let i = 0; i < n; i++) {
        const marker = {
          lng: Math.random() * 0.005+ lng,
          lat: Math.random() * 0.005 + lat,
          show: false,
          params: [
            {
              p_c_name: "温度",
              p_desc: "28.28",
              p_c_unit: "°C"
            },
            {
              p_c_name: "湿度",
              p_desc: "32.54",
              p_c_unit: "%"
            },
            {
              p_c_name: "含钾量",
              p_desc: "0.54",
              p_c_unit: "ug/mg"
            },
          ],
          value: (50 * Math.random() + 20).toFixed(2),
          unit: "°C",
          name: "土壤传感器",
          content: "土壤传感器",
          position: "哈尔滨工业大学威海研究院一号楼中厅510",
          img: "https://gitee.com/seng-acheng63201/images-md/raw/master/20210708113126.png",
          state: i % 2,
          icon: i % 2 === 0 ?
              {
                url: 'https://gitee.com/seng-acheng63201/images-md/raw/master/20210708112650.png',
                size: {width: 20, height: 20},
                opts: {
                  imageSize: {width: 20, height: 20}
                }
              } : {
                url: 'https://gitee.com/seng-acheng63201/images-md/raw/master/20210708112619.png',
                size: {width: 20, height: 20},
                opts: {
                  imageSize: {width: 20, height: 20}
                }
              }

        }
        this.markers.push(marker)
      }
    }
  }
}
</script>
<style scoped>
.bm-view {
  margin: 5% auto;
  width: 60%;
  height: 800px;
}
</style>